<template>
    <div class="box">
      <!-- 页面标题 -->
      <h2 class="page_title">菜品详情</h2>
  
      <!-- 菜单列表 -->
      <div class="item_list">
        <div 
          class="menu_card" 
          v-for="(item, index) in menuList" 
          :key="item.id"
          @click="showDetail(item, index)"
          :class="{ active: selectedItem.id === item.id }"
        >
          <div class="food_img" :style="{ backgroundColor: item.color }">
            <div class="mask">
              <span class="mask_name">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 菜品详情弹窗 -->
      <div class="modal_mask" v-if="showModal">
        <div class="modal_box">
          <h3 class="modal_title">{{ selectedItem.name }} 详情</h3>
          
          <div class="modal_content_wrap">
            <!-- 左侧：菜品详细信息 -->
            <div class="modal_detail">
                <p>
                <span style="width: 400px;height: 200px;background: red;border-radius: 20px;"></span>
                </p>
              <p><span>菜品名称：</span>{{ selectedItem.name }}</p>
              <p><span>菜品价格：</span> <span style="color: red;"> {{ selectedItem.price }}</span></p>
              <p><span>菜品描述：</span>{{ selectedItem.desc }}</p>
              <p><span>推荐指数：</span>★★★★☆</p>
            </div>
  
            <!-- 右侧：店铺详细信息 -->
            <div class="modal_shop">
              <h4 class="shop_title">店铺信息</h4>
              <p><span>老板名字：</span>王大厨</p>
              <p><span>联系方式：</span>138-8888-8888</p>
              <p><span>店铺位置：</span>美食街88号</p>
              <p><span>店铺距离：</span>1.2公里</p>
              <p><span>营业时间：</span>10:00-22:00</p>
              <p><span>卫生情况：</span>★★★★★</p>
            </div>
          </div>
  
          <button class="modal_close" @click="showModal = false">关闭</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // 菜品数据（包含描述信息）
  const menuList = ref([
    { id: 1, name: "黑松露牛排", price: "¥198", color: "#FF7A45", desc: "精选澳洲和牛M5级，搭配黑松露酱汁，口感鲜嫩多汁" },
    { id: 2, name: "法式香煎鹅肝", price: "¥158", color: "#64D2FF", desc: "法国进口鹅肝，搭配无花果酱与烤面包，入口即化" },
    { id: 3, name: "意式蘑菇披萨", price: "¥88", color: "#FFD666", desc: "手工薄底饼皮，铺满马苏里拉芝士与新鲜蘑菇" },
    { id: 4, name: "芒果慕斯蛋糕", price: "¥38", color: "#FF6B9B", desc: "新鲜芒果制作，口感轻盈，甜而不腻" },
    { id: 5, name: "鲜榨草莓汁", price: "¥22", color: "#722ED1", desc: "当季新鲜草莓，无添加纯鲜榨，酸甜可口" },
    { id: 6, name: "日式豚骨拉面", price: "¥48", color: "#FF9A2E", desc: "12小时熬制豚骨汤，搭配溏心蛋与叉烧肉" },
    { id: 7, name: "波士顿龙虾", price: "¥368", color: "#00B4D8", desc: "鲜活波士顿龙虾，蒜蓉粉丝蒸制，鲜味十足" },
    { id: 8, name: "法式蜗牛", price: "¥98", color: "#90E0EF", desc: "法国进口蜗牛，搭配黄油蒜蓉，香气浓郁" },
    { id: 9, name: "提拉米苏", price: "¥58", color: "#C77DFF", desc: "经典意式甜点，咖啡酒浸泡手指饼干，口感丰富" },
    { id: 10, name: "意式浓缩", price: "¥32", color: "#704214", desc: "精选阿拉比卡豆，现磨现煮，口感醇厚" },
    { id: 11, name: "墨西哥卷饼", price: "¥42", color: "#F4A261", desc: "嫩牛柳搭配蔬菜，卷入薄饼，配特制酱料" },
    { id: 12, name: "泰式冬阴功", price: "¥68", color: "#E9C46A", desc: "泰国进口香料，酸辣开胃，配鲜虾鱿鱼" },
    { id: 13, name: "三文鱼刺身", price: "¥128", color: "#F4A261", desc: "挪威进口三文鱼，新鲜现切，口感细腻" },
    { id: 14, name: "奶油蘑菇汤", price: "¥36", color: "#E9C46A", desc: "鲜蘑菇熬制，加入淡奶油，口感浓郁" },
    { id: 15, name: "烤全羊排", price: "¥268", color: "#E76F51", desc: "新西兰羊排，秘制腌料，炭火烤制" }
  ])
  
  // 状态管理
  const selectedItem = ref({}) // 当前选中的菜品
  const showModal = ref(false) // 是否显示详情弹窗
  
  // 显示菜品详情
  const showDetail = (item, index) => {
    selectedItem.value = item
    showModal.value = true
  }
  </script>
  
  <style scoped lang="scss">
  .box {
    width: 100%;
    min-height: 100vh;
    padding: 30px 0;
    background-image: url('../assets/image/bg1.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  
    .page_title {
      text-align: center;
      color: #fff;
      margin-bottom: 30px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
  
    // 菜单列表容器
    .item_list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
      padding: 0 20px;
      max-width: 1800px;
      margin: 0 auto;
    }
  
    // 菜品卡片
    .menu_card {
      width: 160px;
      height: 160px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
      // 选中状态样式
      &.active {
        box-shadow: 0 0 20px rgba(255, 62, 113, 0.8);
      }
  
      .food_img {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
  
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(50, 50, 50, 0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
  
          .mask_name {
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            padding: 0 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
  
        &:hover .mask {
          opacity: 1;
        }
      }
    }
  }
  
  // 详情弹窗样式
  .modal_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  
    .modal_box {
      width: 800px;
      background: white;
      border-radius: 10px;
      padding: 25px;
  
      .modal_title {
        text-align: center;
        color: #ff4b2b;
        margin-bottom: 20px;
        font-size: 22px;
      }
  
      .modal_content_wrap {
        display: flex;
        gap: 30px;
        margin: 15px 0;
  
        // 菜品详情
        .modal_detail {
          flex: 1;
          line-height: 2;
          padding: 15px;
          background: #f9f9f9;
          border-radius: 8px;
  
          span {
            display: inline-block;
            width: 110px;
            font-weight: bold;
            color: #333;
          }
        }
  
        // 店铺详情
        .modal_shop {
          width: 300px;
          line-height: 2;
          padding: 15px;
          background: #f9f9f9;
          border-radius: 8px;
  
          .shop_title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #333;
            border-bottom: 2px solid #ff4b2b;
            padding-bottom: 5px;
          }
  
          span {
            display: inline-block;
            width: 100px;
            font-weight: bold;
            color: #333;
          }
        }
      }
  
      .modal_close {
        width: 100%;
        height: 45px;
        margin-top: 20px;
        background: #ff4b2b;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
  
        &:hover {
          background: #e03e20;
        }
      }
    }
  }
  
  // 选中菜品高亮样式
  .active {
    animation: highlight 0.5s infinite alternate;
  }
  
  @keyframes highlight {
    from {
      box-shadow: 0 0 15px rgba(255, 62, 113, 0.6);
    }
    to {
      box-shadow: 0 0 30px rgba(255, 62, 113, 0.9);
    }
  }
  </style>